<template>
	<view class="content ">

		<!-- #ifndef H5  -->
		<view class="" style="height: 100rpx;">

		</view>
		<!-- #endif -->
		<view class="">
			<slideshow :swiperList="swiperList"></slideshow>
		</view>

		<view class="" style="position: relative;top: -20rpx;">
			<annunciate :informList="informList"></annunciate>
		</view>


		<view class=" pd20">
			<view class="d-flex  j-sb">
				<view @tap="tapTabNav(item,index)" class="d-flex a-center  flex-column"
					v-for="(item,index) in navTabList" :key="index">
					<image :src="item.img" style="width: 80rpx;height: 80rpx;border-radius: 20rpx;" mode="">
					</image>
					<view class="mt-1">
						{{item.name}}
					</view>
				</view>



			</view>

		</view>

		<view class="pd20 tab-type-list">
			<imgTypeTab :imgTypeList="tabList" ref="imgTypeTab" @tabSelect="tabSelect"></imgTypeTab>
		</view>

		<view class="platform-list  mt-2" style="   margin: 20rpx;">
			<view class="platform-item padding-xl radius shadow bg-white" v-for="(item,index) in platformList"
				:key="index">
				<view class="platform-header d-flex">
					<view class="" style="width: 120rpx;height: 120rpx;">
						<image :src="item.image"
							style="border-radius: 10rpx; width: 120rpx;height: 120rpx;background: #ccc;" mode="">
						</image>
					</view>
					<view class="d-flex flex-column ml-1" style="justify-content: space-between;">
						<view class="font-30 font-weight-700">
							{{item.name}}
						</view>
						<view class="font-25 color-hui">
							{{item.descs}}
						</view>
					</view>
				</view>
				<view class="platform-split  mt-3 "
					style="  border-radius: 20rpx; background: #e4f2fd;border: 1rpx solid #84cefe;">
					<view class="d-flex a-center j-sb ">
						<view class="d-flex a-center pl-2">
							<view class="d-flex a-center font-25 mr-3">
								<view class="font-weight-600 mr-1">
									分成比例
								</view>
								<view class="font-25 mr-1">
									|
								</view>
								<view class="font-30 " style="color: #0e9fff;">
									{{item.self_rate}}%
								</view>
							</view>
							<view class="d-flex a-center">
								<view class="font-weight-600 font-25 mr-1">
									推广平台
								</view>
								<view class="font-25 mr-1">
									|
								</view>
								<image :src="item.icon" style="width: 30rpx;height: 30rpx;" mode=""></image>
							</view>

						</view>
						<view @tap="toUpWorks" class="d-flex a-center j-center"
							style="border-radius: 20rpx; height: 70rpx;color: #fff; width: 200rpx;background: #2cabff;">
							上传作品
						</view>
					</view>
				</view>
				<view class="mt-3 platform-guide-type  d-flex a-center  ">
					<view class="platform-guide-item  d-flex a-center j-center "
						style="border-radius:10rpx; padding: 10rpx 20rpx; background: #edf5fd;color: #0e8fff;">
						文案引导
					</view>
				</view>
				<view class="platform-guide-cont pd20 mt-3"
					style="border-radius:10rpx; background: #e4f2fd;border: 1rpx solid #84cefe;">
					<view class="d-flex a-center j-sb border-b pt-2 pb-2" v-for="(item1,index1) in item.text_guide"
						:key="index1">
						<view class="" style="width: 80%;">
							{{item1}}
						</view>
						<view @tap="fuzhi1(item1)" class=" d-flex a-center j-center"
							style="border-radius:10rpx; padding: 10rpx 20rpx; background: #edf5fd;color: #0e8fff;">
							复制
						</view>
					</view>


				</view>
			</view>

			<view class="mt-2">
				<dataNo v-if="platformList.length == 0" msg="加载中"></dataNo>
			</view>
		</view>



		<modal ref="modal"></modal>



	</view>
</template>


<script>
	import search from "@/components/common/search.vue"
	import slideshow from "@/components/common/slideshow.vue"
	import annunciate from "@/components/common/annunciate.vue"
	import panel from "@/components/common/panel.vue"
	import authorList from "@/components/common/authorList.vue"
	import wallpaperList from "@/components/common/wallpaper-list.vue"
	import worksList from "@/components/common/works-list.vue"
	import imgTypeTab from "@/components/common/img-type-tab.vue"
	import {
		advertisingData11
	} from "@/mixin/advertisingData1.js"
	import {
		mixinAdvertising
	} from "@/mixin/advertising.js"
	export default {
		mixins: [advertisingData11, mixinAdvertising],
		components: {
			search,
			slideshow,
			annunciate,
			panel,
			authorList,
			wallpaperList,
			worksList,
			imgTypeTab
		},
		data() {
			return {
				tabList: [
					// {
					// 	name: "抖音",
					// },
					// {
					// 	name: "微信",
					// },
					// {
					// 	name: "快手",
					// },
					// {
					// 	name: "微信",
					// },
					// {
					// 	name: "QQ",
					// }
				],
				platformList: [],
				navTabList: [{
						name: "常见问题",
						img: "/static/index/wt.png",
						url: "/pages/index/issue"
					},
					{
						name: "平台公告",
						url: "/pages/index/notice",
						img: "/static/index/gg.png",
					},
					{
						name: "加入群聊",
						img: "/static/index/ql.png",
					},
					{
						name: "联系客服",
						img: "/static/index/kf.png",
					}
				],

				adShow: false,
				swiperList: [],
				page1: 1,
				informList: [],
				adUnitIdbanner: ""
			}
		},
		onLoad() {
			
			// #ifdef H5
			// 获取是否是微信内置的浏览器
			// this.isWXBrowser = vk.h5.getEnv()
			// // 获取地址栏URL参数 code
			// let code = this.getUrlCode("code");
			// // 获取地址栏URL参数 state
			// let state = this.getUrlCode("state");
			
			// this.options = {
			// 	code: code || '',
			// 	state: state || '',
			// }
			// // 判断是否是微信内置的浏览器
			// if (this.isWXBrowser == 'h5-weixin') {
			// 	if (code) {
			// 		this.loginByWeixin(code); //后台登录
			// 	} else {
			// 		this.getWeixinCode(); //微信授权
			// 	}
			// }
			// #endif
			
			
			this.getBanner()
			this.getInform()
			// // #ifdef MP-WEIXIN
			// setTimeout(() => {
			// 	this.gg()
			// }, 500)
			// // #endif

		},
		onShow() {
			// this.init()
			this.setPlatformList()
		},
		onReachBottom() {},
		onShareAppMessage() {

		},
		methods: {
			// 获取code
			async getWeixinCode(scope = 'snsapi_userinfo') {
				var data = await this.$api.getWxConfig({
					pageIndex: 1,
					pageSize: 10,
					whereJson: {
						key: "wxIdH5"
					},
					sortRule: []
				})
				if (!data.rows[0]) {
					uni.showToast({
						title: "请配置appid",
						icon: "none"
					})
					return
				}
				let appid = data.rows[0].val // 填写公众号的appid
				let redirect_uri = encodeURIComponent(window.location.href.split("?")[0]);
				let url =
					`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=${scope}&state=STATE#wechat_redirect`;
				window.location.href = url;
			},
			// code获取openid和用户信息
			loginByWeixin(type) {
				let that = this;
				if (!that.options.code) {
					vk.toast("请先获取code");
					return false;
				}
				vk.userCenter.loginByWeixin({
					data: {
						code: that.options.code,
						state: that.options.state,
						type
					},
					success: (data) => {
						console.log(data,'注册成功注册成功注册成功注册成功注册成功注册成功')
						// if(data.msg == '注册成功'){
						// 	that.initUserData({
						// 		openid:data.wx_unionid
						// 	})
						// }
						// vk.alert(data.msg);
						that.getUser()
						that.data = data;
					}
				});
			},
			//截取地址栏code
			getUrlCode(name) {
				return (
					decodeURIComponent(
						(new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
							location.href
						) || [, ""])[1].replace(/\+/g, "%20")
					) || null
				);
			},
			toUpWorks() {
				uni.switchTab({
					url: "/pages/creation/creation"
				})
			},
			fuzhi1(item) {
				uni.setClipboardData({
					data: item,
					success: function() {
						uni.showToast({
							title: "复制成功",
						})
						console.log('success');
					}
				});
			},
			// 获取创作者口令
			async setPlatformList() {
				var userInfo = uni.getStorageSync('user')
				var data = await this.$api.getData({
					dbName: "wx_framer",
					pageIndex: 1,
					pageSize: 10,
					whereJson: {
						framer_id: userInfo.openid
					}
				})
				if (data.rows.length == 0) {
					uni.showToast({
						title: "还没有创建创作者口令",
						icon: "none"
					})
				}
				this.home_code = 'xxx'
				if (data.rows[0]) {
					this.home_code = data.rows[0].home_code
				}
				this.getPlatform(this.home_code)
			},
			// 获取推图平台信息
			async getPlatform(code) {
				var data = await this.$api.getData({
					dbName: "wx_platform",
					pageIndex: 1,
					pageSize: 10,
				})
				var list = data.rows
				if (list) {
					
					this.tabList = list
					this.platformList = list[0].childrens
					this.replaceCode()
				}
			},
			replaceCode(){
				this.platformList.forEach(item => {
					item.text_guide = item.text_guide.map(item1 => {
						return item1.replace(/\{\}/, this.home_code)
					})
				})
			},
			tabSelect(item, index) {
				// if (index == 0) {
				// 	this.setPlatformList()
				// 	return
				// }
				this.platformList = item.childrens
				this.replaceCode()
			},
			tapTabNav(item, index) {
				if (!item.url) {
					this.fuzhi()
					return
				}
				uni.navigateTo({
					url: item.url
				})
			},
			fuzhi() {
				var vipConfig = uni.getStorageSync('vipConfig')
				uni.setClipboardData({
					data: vipConfig.wxText,
					success: function() {
						uni.showToast({
							title: "复制成功，请微信添加",
							icon: "none"
						})
						console.log('success');
					}
				});
			},
			searchChange(val) {
				if (val == 'isSearchLogin') {
					this.$refs['modal'].modalName = 'Modal'
					this.adShow = true
				}
			},
			getClipboardData() {
				var t = this;
				var vipConfig = uni.getStorageSync('vipConfig')
				if (vipConfig.shearCheckOpen != 1) {
					return
				}
				wx.getClipboardData({
					success: function(data) {
						if (data.data && !t.getURLFromString(data.data)) {
							var i = t.getURLFromString(data.data);
							wx.showModal({
								title: "检测到内容，是否粘贴？",
								content: i,
								confirmText: "确定",
								confirmColor: "#d4237a",
								success: function(a) {

									a.confirm ? t.$refs['search'].search = data.data : a.cancel
								}
							});
						}
					}
				})
			},
			getURLFromString: function(t) {
				var a = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
				return a.test(t) ? t.match(a)[0] : "";
			},
			gg() {
				var vipConfig = uni.getStorageSync('vipConfig')
				var adUnitId = this.advertisingData1(this.advertisingDataType.popUpList)
				this.adUnitIdbanner = this.advertisingData1(this.advertisingDataType.bannerList)
				if (vipConfig.advertisingOpen == 1) {
					if (this.advertisingOpen) {
						// 在页面中定义插屏广告
						let interstitialAd = null

						// 在页面onLoad回调事件中创建插屏广告实例
						if (wx.createInterstitialAd) {
							interstitialAd = wx.createInterstitialAd({
								adUnitId: adUnitId
							})
							interstitialAd.onLoad(() => {})
							interstitialAd.onError((err) => {})
							interstitialAd.onClose(() => {})
						}

						// 在适合的场景显示插屏广告
						if (interstitialAd) {
							interstitialAd.show().catch((err) => {
								console.error(err)
							})
						}
					}
				}


			},


			// 获取通知
			async getInform() {
				var data = await this.$api.getData({
					dbName: "wx_inform",
					whereJson: {
						status: 1
					},
					pageIndex: 1,
					pageSize: 10,
				})
				this.informList = data.rows.filter(item => {
					return item.site == 3 || item.site == 2
				})
			},

			async getBanner() {
				var data = await this.$api.getData({
					dbName: "wx_banner",
					pageIndex: 1,
					pageSize: 10,
					whereJson: {
						status: 1
					},
					sortRule: [
						{
							name: 'sort',
							type: 'desc'
						}
					]
				})
				this.swiperList = data.rows.filter(item => {
					return item.site == 3 || item.site == 2
				})
			}
		}
	}
</script>
<style lang="scss" scoped>

</style>


<style>
	.tab-type-list .bg-white {
		background-color: transparent !important;
	}

	.coup-introduce {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		/* font-size: 14px;
		color: #666;
		margin: 30rpx;
		white-space: normal;
		word-break: break-all;
		text-overflow: ellipsis;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical; */
	}
</style>
<style scoped lang="scss">
	.platform-list {
		.platform-item {
			padding: 20rpx;
			background: #fff;
		}
	}
</style>
